<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html lang="zh-tw">
<head>
<meta charset="UTF-8">
<title>會員註冊</title>
<!-- favicon -->
<link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico">
<link rel="Bookmark" href="images/favicon.ico" type="image/x-icon"/>
<!-- reset.css -->
<link rel="stylesheet" href="css/reset.css" media="screen">
<!-- Skeleton grid system -->
<link rel="stylesheet" href="css/skeleton.css" media="screen">
<!-- css -->
<link rel="stylesheet" href="css/style.css" media="screen">
<!-- rwdmenu -->
<link type="text/css" rel="stylesheet" href="css/jquery.mmenu.css" />
<!-- Layout and Media queries-->
<link rel="stylesheet" href="css/layout.css" media="screen">
<!-- font-awesome.css -->
<link rel="stylesheet" href="css/font-awesome.min.css" media="screen">

<!--[if lt IE 9]>
        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

<!-- Mobile Specific Meta -->
<meta name="viewport"
	content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0">
</head>
<body class="loginPart">
	<div id="page">
		<div class="header FixedTop">
			<a href="#menu" class="headericon"></a>
			<img src="images/logo.png" alt="proactive Logo">
		</div><!-- header -->
		<div class="content">
			<div class="list-screen clearfix">
				<div class="navfull">
					<div class="container">
						<div class="grid_12">
							<div class="logo"><a href="index">Proactive</a></div>
							<ul class="topnav">
							<c:forEach items="${menuList}" var="menu">
								<li>
									<a href="${menu.url}" class="${menu.classString1}">
										${menu.icon}
										${menu.name}
									</a>
								</li>
							</c:forEach>	
							</ul>
							<ul class="login">
								<li><a href="register">註冊</a></li>
								<li><a href="login">登入</a></li>
							</ul>
						</div>
					</div>
				</div>
			</div>
			<div class="container">
				<div class="grid_12">
					<div class="circle clearfix">
						<h1>會員註冊</h1>
						<form id="sendForm" action="addMember" method="post" class="grid_4 formPart">							
							<label><input type="text" name="account" id="account" placeholder="請輸入Email" class="textbox email" maxlength="55"></label>								
							<label><input type="password" name="password" id="password" placeholder="請輸入密碼" class="textbox key" maxlength="20"></label>
							<label><input type="password" name="password2" placeholder="請確認密碼" class="textbox checkpd" maxlength="20"></label>
							<label><input type="text" name="name" placeholder="請輸入姓名" class="textbox account" maxlength="10"></label><br>
							<!-- <label class="law"><input type="checkbox" name="agree"><a href="javascript:;" title="閱讀條款內容">同意本網站條款</a></label> -->
							<input type="submit" class="btn_enter" value="下一步">
						</form>
					</div>
				</div>
			</div>		
	    </div><!-- content -->
		<!-- 左側meum滑出 -->
		<nav id="menu">
			<ul>		 
				<li class="logo"><a href="index">美編網</a></li>
				<c:forEach items="${menuList}" var="menu">				
				<li class="${menu.classString2}">
					<a class="${menu.classString1}" href="${menu.url}">${menu.icon}${menu.name}</a>
				</li>
				</c:forEach> 		
				<li class="menumember"><a href="register">註冊</a></li>
				<li class="menumember"><a href="login">登入</a></li>
			</ul>
		</nav>
	</div><!-- page -->

	

	<!-- import jquery -->
	<script
		src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<!-- rwdmenu -->
	<script type="text/javascript" src="js/jquery.mmenu.min.all.js"></script>
	<!-- validate -->
	<script src="js/jquery.validate.js"></script>
	<script src="js/messages_zh_TW.js"></script>
	<script src="js/additional-methods.js"></script>
	<script>
		$(function(){
			$('nav#menu').mmenu();
			$("#sendForm").validate({				
				rules:{
	    			name:"required",
        			account:{
        				required:true,
    					remote:{
    						url:"checkAccount",
    						type:"post",
    						cache:false,
    						data:{
    							account:function(){
    					        	return $("#account").val();
    							}
    						}
    					}
        			},
        			password:{
        				required:true,
        				minlength:6
        			},
        			password2:{
        				required:true,
        				minlength:6,
        				equalTo:$("#password")
        			}/*,
        			agree:"required"*/
	    		},	        				
	    		messages:{
	    			name:"請輸入名稱",
	    			account:{
	    				required:"請輸入帳號",
	    				email:"信箱格式不正確",
	    				remote:"帳號已被註冊"
	    			},
	    			password:{
	    				required:"請輸入密碼",
	    				minlength:"長度不得小於{0}"
	    			},
	        		password2:{
	        			required:"請確認密碼",
	        			minlength:"長度不得小於{0}",
	        			equalTo:"密碼輸入不同"
	        		}/*,
	    			agree:"請勾選同意"*/
	    		},
	    		errorPlacement: function (error, element) {
	    	    	if(element.attr('name') == "agree"){
	    	    		element.closest("label").append(error);
	    	    	}
	    	    	else
	    	    		error.insertAfter(element);
	    	    	$("#send").attr("disabled", false);
	    	    }
	    	});
		});
	</script>
	
	<!-- some jquery method we use -->
	<script src="js/hoverjquery.js"></script>

</body>
</html>